<script>
import { reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import NavBar from './components/NavBar.vue'

export default {
  components:{
    NavBar
  },
  setup(){
    const router = useRouter();
    const state = reactive({
      menu:['/home','/data','/user'],
      show:'true'
    })
    router.afterEach(() => {
      // console.log('路径切换了');
      // console.log(router.currentRoute);
      state.show = state.menu.includes(router.currentRoute.value.path)
    })
    
    return {
      ...toRefs(state)
    }
  }
}

</script>

<template>
  <router-view></router-view>
  <NavBar v-if="show"></NavBar>
</template>

<style scoped>
</style>
